<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{width:600px;background:yellow;overflow:hidden;}/* 利用padding补偿法（障眼法） */
.left{width:196px;border:2px solid blue;float:left; 
  padding-bottom:300px;
  margin-bottom:-300px;  /* 传递给父级，这样父级还是原来的由最高的子级撑开的高度 */
}
.right{width:400px;background:red;float:left;
  padding-bottom:300px;
  margin-bottom:-300px; /* 一般情况下，我们会设置一个足够大的数值 */
}
</style>
</head>

<body>
<div class="box">
  <div class="left"> 叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念
  </div>
  <div class="right">
  叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念<br>叶念
  </div>
</div>
</body>
</html>
